<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鹰眼控件</title>
<style type="text/css">
html, body, #map1, #map2 {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: #FFF;
	overflow: hidden;
	font-family: "Trebuchet MS";
}

#map1, #map2 {
	float: left;
	width: 500px;
}

#map1 {
	border-right: 2px solid #999;
}

#map2 {
	border-right: 2px solid #999;
}
</style>
<script src='./libs/SuperMap.Include.js'></script>
<script type="text/javascript">
	var map, layerWorld,control;
	var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World";

	function init() {
		map = new SuperMap.Map("map1", {
			controls : [ new SuperMap.Control.Navigation({
				dragPanOptions : {
					enableKinetic : true
				}
			}) ],projection:"EPSG:3857"
		});
		//初始化鹰眼控件类
		overviewmap = new SuperMap.Control.OverviewMap();
		//属性minRectSize：鹰眼范围矩形边框的最小的宽度和高度。默认为8pixels
		overviewmap.minRectSize = 20;
		layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url); //获取图层服务地址
		control = new SuperMap.Control.MousePosition();

		map.events.on({"mousemove":getMousePositionPx});
		layerWorld.events.on({
			"layerInitialized" : addLayer
		});
		
		
	}

	//添加地图图层、鹰眼控件到map
	function addLayer() {
		map.addLayers([ layerWorld ]);
		map.addControl(overviewmap);
		map.setCenter(new SuperMap.LonLat(118, 40), 6);

	}
	function getMousePositionPx(evt){
		//获取鼠标坐标位置
		var lonLat = map.getLonLatFromPixel(evt.xy);
		if (!lonLat) {
		return;
		}
		//坐标转换
		lonLat.transform("EPSG:3857", "EPSG:4326" );

		var newHtml = "客户端地图坐标投影转换：<br> 地图投影：EPSG:3857 <br> 鼠标位置坐标投影：EPSG:4326 <br> 鼠标位置坐标: " +
		lonLat.lon.toFixed(5) + " " +
		lonLat.lat.toFixed(5);
		document.getElementById("mousePositionDiv").innerHTML=newHtml;
		}
</script>
</head>
<body onload="init()">
<div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
	<div id="map1">123</div>
	<div id="map2">456</div>
</body>
</html>